<div class="col-lg-12">

  <div data-ng-show="processing">
    <i class="fa fa-spinner fa-spin"/>
  </div>

  <div class="panel panel-default"
       data-ng-hide="processing"
       data-ng-class="processReportWarning ? 'panel-warning' : 'panel-success'">
    <div class="panel-heading">
      <span data-translate="">processReportFor</span>
      {{processReport.processId | translate}}<br/>
      <p>
        {{processReport.processedRecords}} <span data-translate="">recordsProcessed</span>
        ({{processReport.startIsoDateTime}}
        <span data-ng-show="processReport.running">...</span>
        <span data-ng-hide="processReport.running"> -
            {{processReport.endIsoDateTime}}</span> =
        {{processReport.totalTimeInSeconds}}s
        )
      </p>
    </div>
    <div class="panel-body">
      <table class="table table-striped">
        <tr>
          <td>{{('processReportTotalRecords') | translate}}</td>
          <td class="text-right">{{processReport.numberOfRecords}}</td>
        </tr>
        <tr>
          <td>{{('processReportChangedRecords') | translate}}</td>
          <td class="text-right">{{processReport.numberOfRecordsProcessed}}
            <ul class="text-left">
              <li class="animate-repeat"
                  data-ng-repeat="(key, value) in processReport.metadataChanges">
                #{{key}} <br/>

                <ul>
                  <li data-ng-repeat="c in value.elementChanges">
                    <span data-translate="">field</span>
                    <strong>{{'batchreplacer-el-' + c.fieldId | translate}}</strong><br/>
                    {{c.originalVal}} >> {{c.changedVal}}
                  </li>
                </ul>
              </li>
            </ul>

          </td>
        </tr>
        <tr>
          <td>{{('processReportNotChangedRecords') | translate}}</td>
          <td class="text-right">
            <ul class="text-left" data-ng-show="processReport.metadataInfos">
              <li class="animate-repeat" ng-repeat="(key, value) in processReport.metadataInfos">
                #{{key}}: {{value.message}}
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>{{('processReportNoProcessFound') | translate}}</td>
          <td class="text-right">{{processReport.noProcessFoundCount}}</td>
        </tr>
        <tr>
          <td>{{('processReportNotOwner') | translate}}</td>
          <td class="text-right">{{processReport.numberOfRecordsNotEditable}}</td>
        </tr>
      </table>


      <div data-ng-show="Object.keys(processReport.metadataErrors).length > 0">
        <h2 data-translate="">metadataErrorReport</h2>
        <table class="table table-striped">
          <tr>
            <th data-translate="">identifier</th>
            <th data-translate="">error</th>
          </tr>
          <tr data-ng-repeat="(key, value) in processReport.metadataErrors">
            <td>{{key}}</td>
            <td>
              <h4>{{value.message}}</h4>
              <pre>{{value.stack}}</pre>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
